<template>
  <el-container>
    <el-header>
      <div class="header">
        <img src="../assets/u27.png" alt />
        <h2 class="cache1">返回 |</h2>
        <h2 class="cache2">添加老师</h2>
      </div>
      <div class="header-r">
        <i class="el-icon-mobile-phone">下载中心</i>
        <i class="el-icon-user">{{this.$store.state.loginName}}</i>
      </div>
    </el-header>
    <el-main class="contentent">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="上传封面:">
          <el-upload
            v-model="form.name"
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
            <span class="text">上传</span>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt />
          </el-dialog>
        </el-form-item>

        <el-form-item label="老师姓名:">
          <el-input v-model="form.name" placeholder="请输入教师姓名"></el-input>
        </el-form-item>
        <el-form-item label="性别:">
          <template>
            <el-radio v-model="radio" label="1">男</el-radio>
            <el-radio v-model="radio" label="2">女</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="出生日期:">
          <el-col :span="11">
            <el-date-picker placeholder="出生日期" type="date" v-model="form.date" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="联系电话:">
          <el-input v-model="form.tel" placeholder="请输入手机号码"></el-input>
        </el-form-item>
        <el-form-item label="所属校区:">
          <el-select v-model="form.school" placeholder="请选择校区">
            <el-option label="包江校区" value="baojiang"></el-option>
            <el-option label="包河校区" value="baohe"></el-option>
            <el-option label="包湖校区" value="baohu"></el-option>
            <el-option label="包海校区" value="baohai"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="账号:">
          <el-input v-model="form.userid" placeholder="请输入教师姓名"></el-input>
        </el-form-item>
        <el-form-item label="密码:">
          <el-input v-model="form.userpass" placeholder="请输入教师姓名"></el-input>
        </el-form-item>
        <el-form-item label="科目:">
          <el-select v-model="value1" multiple placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="一对一:">
          <template>
            <el-radio v-model="vip" label="1">无一对一课程</el-radio>
            <el-radio v-model="vip" label="2">添加一对一课程</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="报名人数:" class="sign">
          <template>
            <el-input-number
              v-model="num"
              controls-position="right"
              @change="handleChange"
              :min="1"
              :max="100"
            ></el-input-number>
          </template>
        </el-form-item>
        <el-form-item label="教龄:" class="years">
          <template>
            <el-input-number
              v-model="num2"
              controls-position="right"
              @change="handleChange"
              :min="1"
              :max="30"
            ></el-input-number>
          </template>
        </el-form-item>
        <el-form-item label="标签:">
          <el-tag
            :key="tag"
            v-for="tag in dynamicTags"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)"
          >{{tag}}</el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          ></el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">+添加标签</el-button>
        </el-form-item>
        <el-form-item label="教师风采:">
          <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              点击或将文件拖拽到这里上传，图片不超过5张
              <br />
              <em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">支持扩展名：jpg、jpeg</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="教育经历:">
          <el-input
            type="textarea"
            v-model="form.experience"
            class="experience"
            placeholder="请输入教育经历，不超过200字"
          ></el-input>
        </el-form-item>
        <el-form-item label="教师简介:">
          <el-input
            type="textarea"
            v-model="form.introduction"
            class="experience"
            placeholder="请输入教师简介，不超过200字"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button>立即返回</el-button>
          <el-button type="primary" @click="onSubmit">确认添加</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>
<script>
export default {
  name: "education-item1-m1",
  data() {
    return {
      //标签内容  dynamicTags inputVisible inputValue
      dynamicTags: ["认真负责", "专业性高", "幽默风趣"],
      inputVisible: false,
      inputValue: "",
      num: 1, //报名人数
      num2: 1, //教龄
      options: [
        {
          value: "选项1",
          label: "中国琴",
        },
        {
          value: "选项2",
          label: "钢琴",
        },
        {
          value: "选项3",
          label: "古筝",
        },
        {
          value: "选项4",
          label: "芭蕾舞",
        },
        {
          value: "选项5",
          label: "书法",
        },
        {
          value: "选项6",
          label: "拉丁舞",
        },
        {
          value: "选项7",
          label: "二胡",
        },
      ],
      value1: [],
      value2: [],
      radio: "1", //性别
      vip: "1", //一对一课程
      dialogImageUrl: "",
      dialogVisible: false,
      form: {
        photo: "", //照片
        name: "", //姓名
        radio: "", //性别
        date: "", //出生日期
        tel: "", //电话
        school: "", //所属校区
        userid: "", //账号
        userpass: "", //密码
        subject: "", //科目
        experience: "", //教育经历
        introduction: "", //教师简介
      },
    };
  },
  methods: {
    //报名人数
    handleChange(value) {
      console.log(value);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    onSubmit() {
      console.log("submit!");
    },
    // 标签  handleClose  showInput    handleInputConfirm
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
  },
};
</script>
<style scoped>
.header-r {
  height: 65px;
  width: 300px;
  position: absolute;
  right: 0px;
  top: 0px;
}
.header-r .el-icon-user {
  padding-top: 30px;
  margin-left: 40px;
  margin-right: 20px;
}
.header {
  border-width: 0px;
  width: 1100px;
  height: 65px;
}
.header img {
  float: left;
  border-width: 0px;
  margin: 20px 15px;
  width: 20px;
  height: 15px;
}
.header .cache1 {
  border-width: 0px;
  float: left;
  margin: 18px 5px 0 5px;
  word-wrap: break-word;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: 22px;
}
.header .cache2 {
  float: left;
  border-width: 0px;
  height: 50px;
  font-family: "PingFang-SC-Regular", "PingFang SC";
  margin: 18px 15px 5px 0;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: 22px;
}
.header h2:hover {
  color: skyblue;
}
.el-upload--picture-card {
  width: 90px !important;
  height: 90px !important;
  margin-bottom: 15px !important;
}
.contentent h4 {
  float: left;
  font-weight: 500;
  font-size: 14px;
  color: #606266;
}
.contentent .el-icon-plus {
  position: relative !important;
  top: -30px;
  left: 17px;
}
.contentent .text {
  position: relative;
  top: 0px;
  left: -15px;
  font-size: 16px;
  color: #8c939d;
}
.contentent .el-input__inner {
  width: 400px !important;
}
.contentent .el-form-item__contentent {
  margin-left: 100px !important ;
}
.contentent .sign .el-input__inner {
  width: 100px !important;
}
.contentent .sign .el-input-number {
  width: 100px !important;
}
.contentent .years .el-input__inner {
  width: 100px !important;
}
.contentent .years .el-input-number {
  width: 100px !important;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.el-upload-dragger {
  border: 1px dashed red;
}
.contentent .experience {
  width: 500px !important;
}
</style>